<template>


   <div class="page-box">
      <div class="page-title">
         {{ '登录日志' }}
      </div>

      <div class="page-search">
         <div class="search-box" :style="{ height: IsHeight }">
            <el-input
               v-model="search"
               placeholder="操作人/操作行为/操作详情"
               style="width: 240px; margin-right: 10px; margin-bottom: 10px"
               suffix-icon="Search"
            />
         </div>

         <div class="search-btn">
            <div class="btn_item" @click="handleClickHeight">
               <img class="btn_img" src="@/assets/sx.png" alt=""> <span> 高级筛选 </span>
            </div>
            <div class="btn_item">
               <img class="btn_img" src="@/assets/dc.png" alt=""> <span> 导出 </span>
            </div>
         </div>

      </div>
   </div>

   <div class="table-box">

      <el-table :data="tabeData" style="width: 100%" v-loading="loading" border>
         <el-table-column align="center" fixed prop="rowNumber" label="登录人" width="100" />
         <el-table-column align="center" prop="title" label="人员编号(登录账号)" width="240" />
         <el-table-column align="center" prop="house_type_name" label="联系电话(登录账号 )" width="240">

         </el-table-column>

         <el-table-column align="center" prop="category_name" label="登录时间" width="240">
         </el-table-column>

         <el-table-column align="center" prop="carport_district_count" label="IP地址" width="230" />
         <el-table-column align="center" prop="carport_parking_count" label="浏览器" width="230" />
         <el-table-column align="center" prop="zip" label="系统" width="230" />
         <el-table-column label="登录时长(小时)" min-width="130" prop="id" align="center">
         </el-table-column>
      </el-table>
   </div>

   <!-- 分页 -->
   <Pagination class="pagination" @pageSize="pageSize" @getPage="getPage" :page="pageData.page"
      :page-size="pageData.pageSize" :total="total" />

   <Dialog />
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import { usePlatformManagementStore } from "@/stores";
import Pagination from "@/components/Pagination.vue";
const platformManagementStore = usePlatformManagementStore();
const router = useRouter();
import api from "@/api";
import Dialog from "./components/dialog.vue";

let IsHeight = ref<number | string>(0);

const search = ref<string>('');

const pageData = ref({
   pageSize: 10,
   page: 1,
   house_type: "",
   category: "",
   keywords: "",
});
const total = ref(0);
const tabeData = ref([]);
// 侦听动态分页
watch(
   () => {
      return pageData.value;
   },
   () => {
      getAlltabeData();
   },
   { deep: true }
);

let nub = ref<number>(0);
const handleClickHeight = () => {
   nub.value++;
   if (nub.value % 2 == 1) {
      IsHeight.value = '40px';
   } else {
      IsHeight.value = '0px';
   }
}

const pageSize = (e: number) => {

   pageData.value.pageSize = e
}
const getPage = (e: number) => {
   pageData.value.page = e
}
onMounted(() => {
   getAlltabeData();
})

// 获取门店列表
const getAlltabeData = async () => {
   const res = await api.parking.getAll({
      ...pageData.value,
   });
   if (res.code == 0) {
      tabeData.value = res.data.data;

      total.value = res.data.total;
   }
};

const loading = ref(false);


// 跳转区域管理
const handleClick = (row) => {
   platformManagementStore.setShopInfo(row);
   router.push({
      name: "RegionView",
   });
};


</script>

<style lang="scss" scoped>
.btn-box {
   display: flex;
   align-items: center;
   justify-content: center;
}

// 输入框样式
::v-deep .el-input__wrapper {
   background-color: rgba(250, 252, 251, 1);
}

//表格样式

::v-deep .el-table {
   --el-table-header-bg-color: rgba(235, 236, 240, 1);
}

::v-deep .el-table thead {
   color: #444;
}

//分页样式
.pagination {
   width: calc(100% - 250px);
   position: fixed;
   bottom: 20px;
   right: 20px;
   padding-top: 10px;
   border-top: 1px solid #98989848;


}

::v-deep .el-pagination.is-background .el-pager li.is-active {
   background-color: #000 !important;
}
</style>
